<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入类别关键字" prefix-icon="el-icon-search" v-model="search.cash_name">
      </el-input>
      <el-button class="filter-item" type="primary" plain v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table :data="listData" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
       <el-table-column type="index"  align="center" label="序号" width="80"></el-table-column>
      <el-table-column min-width="120px" label="收费类型">
        <template slot-scope="scope">
          <span>{{scope.row.cash_name}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="110px" label="费用">
        <template slot-scope="scope">
          <span><el-input @change="handleChange(scope.row, 'fee')" style="width: 100px;" type='number' min="0.01" step="0.01" class="filter-item" placeholder="费用" v-model="scope.row.fee"></el-input></span>
        </template>
      </el-table-column>
       <el-table-column class-name="status-col" label="状态" width="100">
        <template slot-scope="scope">
           <el-button size="mini" :type="scope.row.status | statusFilter" plain @click="handleChange(scope.row)">{{scope.row.status | statusName}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
  </div>
</template>
<script>
import waves from '@/directive/waves' // 水波纹指令
import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API

export default {
  name: 'Category',
  directives: {
    waves
  },
  components: { BackToTop },
  // 参数过滤
  filters: {
    statusFilter(status) {
      const statusMap = {
        '0': 'danger',
        '1': 'success'
      }
      return statusMap[status]
    },
    statusName(status) {
      return (status === '1') ? '正常' : '下架'
    }
  },

  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中
        background: '#e7eaf1'// 按钮的背景颜色
      },
      // 搜索
      search: {},
      listData: [],
      listLoading: false
    }
  },

  // 初始化数据
  created() {
    setTimeout(() => {
      this.fetchData()
    }, 20)
  },

  methods: {
    // 获取数据
    fetchData() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        api.infoCashTypeApi(this.search).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
          }
          this.listLoading = false
        })
      })
    },

    // 搜索
    handleFilter() {
      this.fetchData()
    },

    // 费用/状态
    handleChange(row, state) {
      var data = {
        id: row.cash_type_id
      }
      if (state === 'fee') {
        data.price = row.fee
      } else {
        data.status = (row.status === '1') ? '0' : '1' //  状态,0冻结,1正常
      }
      this.postDataUrl(data, state, row)
    },

    // 操作编辑.状态 url
    postDataUrl(data, state, row) {
      api.editInfoCashTypeApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          if (state === 'fee') {
            row.fee = data.price
          } else {
            row.status = data.status
          }
        }
        this.addVisible = false
      })
    }

  }

}
</script>
